<!--  -->
<template>
    <div class="user" style="padding: 0px;">
        <el-card>
            <el-form size="small" :inline="true" :model="tableOrderDataForm" class="demo-form-inline">
                <el-form-item label="订单号">
                    <el-input size="small" @keyup.enter.native="onSearch" clearable v-model="tableOrderDataForm.orderNo" placeholder="请输入订单号"></el-input>
                </el-form-item>
                <el-form-item label="提货人">
                    <el-input size="small" v-model="tableOrderDataForm.takeName" placeholder="请输入提货人" @keyup.enter.native="onSearch" clearable></el-input>
                </el-form-item>
                <el-form-item label="提货电话">
                    <el-input size="small" v-model="tableOrderDataForm.takePhone" placeholder="请输入提货电话" @keyup.enter.native="onSearch" clearable></el-input>
                </el-form-item>

                <el-form-item label="支付金额">
                    <el-input size="small" v-model="tableOrderDataForm.payAmount" placeholder="请输入支付金额" @keyup.enter.native="onSearch" clearable></el-input>
                </el-form-item>
                <!-- <el-form-item label="用户id">
                    <el-input size="small" v-model="tableOrderDataForm.userId" placeholder="请输入用户id"
                        @keyup.enter.native="onSearch" clearable></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="开始日期">
                    <el-date-picker v-model="tableOrderDataForm.startDate" type="date" value-format="YYYY-MM-DD"
                        placeholder="请选择开始日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="结束日期">
                    <el-date-picker v-model="tableOrderDataForm.endDate" type="date" value-format="YYYY-MM-DD"
                        placeholder="请选择结束日期">
                    </el-date-picker>
                </el-form-item> -->
                <!-- <el-form-item label="退款方式">
                    <el-select clearable style="width: 150px;" v-model="tableOrderDataForm.refundType"
                        placeholder="请选择退款方式">
                        <el-option :label="item2.name" :value="item2.id" v-for="(item2, index2) in refundTypeList"
                            :key="index2"></el-option>
                    </el-select>
                </el-form-item> -->
                <!-- <el-form-item label="支付方式">
                    <el-select clearable style="width: 150px;" v-model="tableOrderDataForm.payType"
                        placeholder="请选择支付方式">
                        <el-option :label="item2.name" :value="item2.id" v-for="(item2, index2) in payTypeList"
                            :key="index2"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="备注">
                    <el-input size="small" @keyup.enter.native="onSearch" clearable v-model="tableOrderDataForm.remark"
                        placeholder="请输入备注"></el-input>
                </el-form-item> -->

                <el-form-item>
                    <el-button size="small" type="primary" icon="Search" @click="onSearch">查询</el-button>
                    <el-button @click="onReset" icon="Refresh">重置</el-button>
                    <el-button @click="addClick" icon="Download">导出账单</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!--搜索表单-->
        <div class="common-seach-wrap">
            <!-- <el-input placeholder="请输入ID/订单号"
            @keyup.enter.native="onSearch" clearable
            v-model="searchForm.keyword" style="width:30%;float:right">
                <template #append>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </template>
</el-input> -->
            
        </div>
        <el-card style="margin-top:5px;">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="全部订单" name="all"></el-tab-pane>
                <el-tab-pane label="未支付" name="wzf"></el-tab-pane>
                <el-tab-pane label="已支付" name="yzf"></el-tab-pane>
                <el-tab-pane label="退款" name="tk"></el-tab-pane>
            </el-tabs>
            <WalletTable :tab-type="activeMap[activeName]" ref="walltRef" />
        </el-card>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import WalletTable from './WalletTable.vue'

export default {
    name: '',
    props: {},
    components: {
        WalletTable
    },
    data() {
        return {
            activeName: 'all',
            activeMap: {
                'wzf': 0,
                'yzf': 1,
                'tk': 2,
                'all': ''
            },
            tableOrderDataForm: {},
            // PART("部分退款", 20),
            // ALL("全部退款", 10),
            // MULTIPLE("超额退款", 30);
            refundTypeList: [
                {
                    id: '20',
                    name: '部分退款'
                },
                {
                    id: '10',
                    name: '全部退款'
                },
                {
                    id: '30',
                    name: '超额退款'
                }
            ],
            // BALANCE("余额支付", 10),
            // WECHAT("微信支付", 20),
            // ALIPAY("支付宝支付", 30),
            // OFFLINE("线下支付",40),
            // BALANCE_WECHAT("余额微信组合支付",50),
            // BANK("银行支付",60),
            payTypeList: [
                {
                    id: '10',
                    name: '余额支付'
                },
                {
                    id: '20',
                    name: '微信支付'
                },
                {
                    id: '40',
                    name: '线下支付'
                },

            ],
            searchForm: {
                pageIndex: 1,
                pageSize: 10,
                keyword: ''
            }
        };
    },
    computed: {},
    watch: {},
    methods: {
        handleClick(row, type) {
            if (type === 1) {
                //编辑
                this.$router.push({
                    path: '/saleeMan/SaleeManDetail',
                    query: {
                        id: row.userId
                    }
                })
            } else {
                //删除
                ElMessageBox.confirm(
                    '您确定要删除此业务员数据?',
                    '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    ElMessage({
                        type: 'success',
                        message: '删除成功!'
                    })
                })
            }
        },
        addClick() {
            const $this = this
            const refs = $this.$refs['walltRef']
            if (refs) {
                refs.exportClick()
            }
        },
        onSearch() {
            const $this = this
            const refs = $this.$refs['walltRef']
            if (refs) {
                refs.onSearch($this.tableOrderDataForm)
            }
        },
        onReset(){
            const $this = this
            const refs = $this.$refs['walltRef']
            if (refs) {
                $this.tableOrderDataForm.orderNo = null;
                $this.tableOrderDataForm.takeName = null;
                $this.tableOrderDataForm.takePhone = null;
                $this.tableOrderDataForm.payAmount = null;
                refs.onSearch($this.tableOrderDataForm)
            }
        }
    },
    created() {

    },
    mounted() {

    },
}
</script>
<style scoped></style>